<template>
  <div class="wskb-content" id="wskb">
    <div class="wskb-left">
      <tem-charts :style="{minHeight:15+'rem'}" :theEquipId="theEquipId"></tem-charts>
      <div class="time-show">120.5</div>
      <!-- <div class="time-show1">12:55</div> -->
      <img src="../../assets/img/pad/equipgif.gif" style="width: 100%;height: 20rem;background: linear-gradient(to bottom ,rgb(195, 197, 196), 10%,rgb(4, 99, 151),   60%,rgb(77, 92, 122),90%,rgb(175, 198, 209));" />
      <div class="time-show1">3458</div>
      <tem-table ></tem-table>
    </div>


    <div class="wskb-right">
      <div v-for="(item,index) in this.equipData" :key="index" class="kind" @click="addactiveClass(index,item.equipmentId)" :class="{'activeClass':active === index}" >
        <img :src="item.equipmentPic" class="wskb-img" />
        <span class="wskb-title">{{item.equipmentName}}</span>
      </div>
    </div>


  </div>
</template>

<script>
  import TemCharts from './components/temCharts'
  import TemTable from './components/table'
  import EquipTypeApi from '@/api/equipType'
  export default{
    name:'workShopKanBan',
    data(){
      return{
        active:0,
        equipList:[{
          equipName:'多功能提取罐',
          equipImg:require('@/assets/img/kanban/u1044.svg')
        },{
          equipName:'提取液储罐',
          equipImg:require('@/assets/img/kanban/u1045.svg')
        },{
          equipName:'提取液储罐',
          equipImg:require('@/assets/img/kanban/u1046.svg')
        },{
          equipName:'提取液储罐',
          equipImg:require('@/assets/img/kanban/u1047.svg')
        }],
        equipData:[],
        // 分页
        pageInfo:{
          // pageNo:1,
          pageSize:10,
          currentPage: 1,
          count:0
        },
        // 设备id
        theEquipId:''
      }
    },
    components:{
      TemCharts,
      TemTable
    },
    created() {
      EquipTypeApi.eEquipmentypeList(this.pageInfo).then(res => {
        if(res.data.status === "200"){
          this.equipData = res.data.data.records
          this.theEquipId = this.equipData[0].equipmentId
        }
      })
    },
    methods:{
      addactiveClass(index,equipmentId){
        this.active = index
        this.theEquipId = equipmentId
      },

    },
  }
</script>

<style scoped="scoped">
  .wskb-content{
    display: flex;
    /* width: 100%; */
    min-width: ;
    /* height: 100vh; */
    min-width: 100px;
  }
  .wskb-left{
    /* flex: 1; */
    width: 85%;
    /* height: 100vh; */
    display: flex;
    flex-direction: column;
    padding-right: 5px;
    background-color: rgb(238, 235, 220);
    overflow-y: scroll;
  }
  .wskb-right{
    /* width: 20%; */
    min-width: 15vw;
    /* height: 100vh; */
    /* padding: 0 10px; */
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: space-around;
    background-color: rgb(215, 215, 215);
    text-align: center;
  }
 .wskb-img{
    width: 13vw;
    height: 20vh;
  }
  .wskb-title{
    display: block;
    margin-top: 7px;
  }
  .kind{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50px;
  }
  .kind:hover{
    background-color: rgb(164, 213, 235);
  }
  .activeClass{
    background-color: rgb(164, 213, 235);
  }
/*  #wskb body{
    min-width: 100px;
  } */

  .time-show{
    /* width: 100px; */
    height: 40px;
    width: 110px;
    box-shadow: -1px -1px 3px #909399;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    line-height: 40px;
    text-align: center;
    font-family:digital-7;
    background-color: #000b2b;
    color: red;
    font-size: 25px;
    position: relative;
    top: 180px;
    left: 44%;
  }
  .time-show1{
    /* width: 100px; */
    height: 40px;
    width: 110px;
    box-shadow: -1px -1px 3px #909399;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    line-height: 40px;
    text-align: center;
    font-family:digital-7;
    background-color: #000b2b;
    color: red;
    font-size: 25px;
    position: relative;
    top: -83px;
    right: -81.5%;
  }

  @media screen and (min-width: 700px) {
    .time-show{
      /* width: 100px; */
      height: 30px;
      width: 80px;
      line-height: 30px;
      font-size: 25px;
    }
    .time-show1{
      /* width: 100px; */
      height: 30px;
      width: 85px;
      line-height: 30px;
      font-size: 25px;
    }
  }
</style>
